<template>
  <!-- :style="{ bottom: route.meta.showTab && '50px' }" -->
  <div class="wrapper" :class="classObj">
    <!-- <router-view v-slot="{ Component, route }">
      <keep-alive>
        <component :is="Component" v-if="$route.meta?.keepAlive" :key="route.fullPath" />
      </keep-alive>
      <component :is="Component" v-if="!$route.meta?.keepAlive" :key="route.fullPath" />
    </router-view> -->
    <router-view v-slot="{ Component, route }">
      <keep-alive :include="keepAliveComponents">
        <component :is="Component" :key="route.fullPath" />
      </keep-alive>
    </router-view>
  </div>
  <Docker v-if="route.meta.showTab" />
</template>

<script lang="ts">
import { defineComponent, computed, watchEffect } from 'vue'
import Docker from './Docker.vue'
import { useRoute } from 'vue-router'
import store from '@/store'

export default defineComponent({
  components: { Docker },
  setup() {
    const route = useRoute()
    const classObj = computed(() => {
      return {
        showTab: route.meta.showTab
      }
    })

    const body = document.getElementsByTagName('body')[0]

    watchEffect(() => {
      if (route.meta.showTab) {
        body.style.backgroundColor = '#f9f9f9ff'
      } else {
        body.style.backgroundColor = '#fcfcfc'
      }
    })

    const keepAliveComponents = computed(() => {
      const cachedView = store.state.cachedView.cachedList
      return cachedView.length > 0 ? cachedView : []
    })

    return { route, classObj, keepAliveComponents }
  }
})
</script>

<style lang="scss" scoped>
.wrapper {
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0px;
  right: 0;
}
.showTab {
  bottom: 50px;
}
</style>
